<template>
	<view class="page">
		<view class="cu-bar bg-white search">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="aufnr" confirm-type="search" focus="true" @confirm="goSearch()" class="input" type="text" placeholder="输入生产指令单搜索"/>
			</view>
			<view class="action" @tap="goSearch">
				<button class="cu-btn bg-gradual-green shadow-blur round">搜索</button>
			</view>
			<button class="cu-btn bg-gradual-green shadow-blur round" @click="changeMore">更多</button>
		</view>
		<view class="cu-bar bg-white search" v-show="tomore">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="kdauf" confirm-type="search" focus="true" @confirm="goSearch" class="input" type="text" placeholder="输入销售单搜索"/>
			</view>
		</view>
		<view class="cu-bar bg-white search" v-show="tomore">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="bstnk" confirm-type="search" focus="true" @confirm="goSearch" class="input" type="text" placeholder="输入客户单号搜索"/>
			</view>
		</view>
		<view class="cu-bar bg-white search" v-show="tomore">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
					<uni-data-select v-model="werks"  @change="change" :localdata="range" style="width: 300rpx;"></uni-data-select>
			</view>
		</view>
		<view class="cu-bar bg-white search" v-show="tomore">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="matnr" confirm-type="search" focus="true" @confirm="goSearch" class="input" type="text" placeholder="输入物料编码搜索"/>
			</view>
		</view>
		<view class="cu-bar bg-white search" v-show="tomore">
			<view class="search-form round">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="createTimeStart" @maskClick="maskClick" />
				<span>~</span>
				<uni-datetime-picker type="date" :clear-icon="false" v-model="createTimeEnd" @maskClick="maskClick" />
			</view>
		</view>
		<view class='bg-grey'>
			<view class="conf-list">
				<view class="conf-list-item" v-for="(item,index) in listData" :key="index">
					<view class="conf-list-card">
						<view class="conf-list-title">
							<view>
								<text>物料名称：</text>
								{{item.maktx}}
							</view>
							<view>
								<text>物料编码：</text>
								{{item.matnr}}
							</view>
						</view>
						
						<view class="conf-list-content1">
							<view>
								<text>客户单号：</text>
								<text>{{item.bstnk}}</text>
							</view>
							<view>
								<text>下单时间：</text>
								<text>{{item.createTime}}</text>
							</view>
						</view>
						<view class="conf-list-content1">
							<view>
								<text>颜色：</text>
								<text>{{item.color}}</text>
							</view>
							<view>
								<text>尺码：</text>
								<text>{{item.size}}</text>
							</view>
							
						</view>
						<view class="conf-list-content">
							<view>
								<text>指令数量：</text>
								<text>{{item.menge}}</text>
							</view>
						</view>
						<view class="conf-list-content1">
							<view>
								<text>入库合计：</text>
								<text>{{item.stockinTotal}}</text>
							</view>
							<view>
								<text>入库欠数：</text>
								<text>{{item.stockinDeficiency}}</text>
							</view>
						</view>
						<view class="conf-list-content1">
							<view>
								<text>出库合计：</text>
								<text>{{item.stockoutTotal}}</text>
							</view>
							<view>
								<text>出库欠数：</text>
								<text>{{item.stockoutDeficiency}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapState(['companyCode'])
		},
		data() {
			return {
				tomore:false,
				dateSel:'5',
				selType:'2',
				visible: false,
				confirmationString: '135/26966',
				value: 2,
				text: '暂无数据',
				title: '下拉刷新 + 加载更多',
				data: [],
				range: [],
				listData: [],
				datetimerange: [],
				listLgortOptions:[],
				pageNo: 0,
				endFlag: false,
				filter: "",
				loadMoreText: "加载中...",
				inputText: "",
				aufnr: '',
				matnr: '',
				kdauf:'',
				vornr: '',
				bstnk: '',
				werks: '',
				createBy: '',
				createTime: '',
				createTimeStart: '',
				createTimeEnd:'',
				view: false,
				date: '',
				createPeo:''
			};
		},

		onShow() {
			this.createBy = uni.getStorageSync('login_user_info').username
			this.loadMoreText = "加载更多";
		},
		onLoad(e) {
				this.initData();
				this.getFactory();
		},
		mounted(){
		},
		onUnload() {
			this.max = 0;
			// this.data = [],
			this.listData = [];
		},
		onReachBottom() {
			if (this.endFlag == true) {
				this.loadMoreText = "已显示全部数据"
				uni.showToast({
					icon: 'none',
					title: this.loadMoreText
				});
				return;
			}
			setTimeout(() => {
				this.listData = []
				this.getList()
			}, 300);
		},
		onPullDownRefresh() {
			this.pageNo = 0,
			this.initData();
			uni.stopPullDownRefresh();
		},
		methods: {
			changeMore(){
				this.tomore = !this.tomore
			},
			goSearch(val){
				this.pageNo = 0
				this.getList()
			},
			getFactory(){
				let url = '/dcloud/mm/goodsReceipt/main/listWerksOptions'
				this.$http.post(url, {
					
				}).then(res => {
					if (res && res.data.result) {
						this.range = res.data.result;
					}
				}).catch(err => {
					console.log(err);
				});
			},
			choose() {
				this.selFlag = true;

			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			dialogClose() {
				console.log('点击关闭')
			},
			close() {
				console.log('弹窗关闭');
			},
			change(e) {
				this.selType = e
				console.log("e:", e);
			},
			dropDown() {
				this.view = !this.view
			},
			search() {
				this.pageNo = 1;
				this.getList()
				this.view = !this.view
				// this.listData=[];
				// this.loadData();
			},

			initData() {
				setTimeout(() => {
					this.getList();
					uni.stopPullDownRefresh();
				}, 300);
			},
           //产品列表
			getList() {
				this.listData=[]
				let url = '/dcloud/report/mmReport/queryProductStockInOutReport'
				this.pageNo+=1
				this.$http.get(url, {
					params: {
						"pageNo":this.pageNo,
						"pageSize":100,
						"dateSel": this.dateSel,
						"aufnr": this.aufnr,
						"kdauf": this.kdauf,
						"bstnk": this.bstnk,
						"werks": this.werks,
						"matnr": this.matnr,
						"createTimeStart": this.createTimeStart,
						"createTimeEnd": this.createTimeEnd,
					}
				}).then(res => {
					if (res.data.success) {
						const data = res.data.result
						this.confirmationString = data.afruCount + '/' + data.afruNum;
						this.listData=res.data.result.records;
						if (this.listData.length <100) {
							this.endFlag = true;
							this.loadMoreText = "已显示全部数据"
						}
					}
				}).catch(err => {
					console.log(err);
				});
			},
			postSearch(e) {
				this.listData = [];
				this.endFlag = false;
				this.pageNo = 1;
				this.filter = e.detail.value;
				this.loadMoreText = "加载更多",
					this.getList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-select {
		font-size: 14px;
		border: 0px solid #dd524d;
		box-sizing: border-box;
		border-radius: 0px;
		padding: 0 5px;
		padding-left: 10px;
		position: relative;
		display: flex;
		-webkit-user-select: none;
		user-select: none;
		flex-direction: row;
		align-items: center;
		/*    border-bottom: solid 1px #e5e5e5; */
		border-left: solid 1px #e5e5e5;
		width: 100%;
		flex: 1;
		height: 50upx;
	}

	::v-deep .uni-stat__actived {
		width: 150rpx;
		flex: 1;
	}
	.input-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #414f61;
		height: 30px;
		border-radius: 15px;
		padding: 0 10px;
		flex: 1;
	}
	
	.example-body {
		background-color: #fff;
		padding: 10px;
	}
	
	.input {
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
		color: black;
	}

	page {
		background: #FFFFFF;
		width: 750upx;
		overflow-x: hidden;
	}

	.search-title {
		display: flex;
		padding: 5upx 0upx;

	}
	.bg-grey {
		background-color: rgb(234, 231, 231);
		padding: 2upx 20upx;

		.search-list {

			display: flex;
			height: 140upx;
			padding: 10upx 0upx 10upx 0upx;

		}

		.conf-list {
			margin-top: -10upx;

			// 	height: 180upx;
			// background: greeen;
	// 		.conf-list-item:active {	// 	background-color: #f5f5f5;	// }
			.conf-list-item {
				height: 350upx;
				background: #FFFFFF;
				color: black;
				border-radius: 20upx;

				.conf-list-card {
					height: 350upx;
					border-radius: 20upx;
					margin-top: 20upx;

					.conf-list-title {
						height: 60upx;

						display: flex;
						padding: 6upx 20upx 0 20upx;
						justify-content: space-between;
						border-radius: 20upx 20upx 0upx 0upx;
						border-bottom: solid 1px #e5e5e5;
						font-size: 30upx;
						// padding: 10upx 0 0 0;
						// line-height: 30upx;
					}

					.conf-list-content {
						height: 60upx;
						padding: 0 20upx;
						font-size: 26upx;
					}

					.conf-list-content1 {
						height: 60upx;
						padding: 0 20upx;
						font-size: 26upx;
						display: flex;
						justify-content: space-between;
						view{
							font-size: 26upx;
						}
					}
				}
			}
		}
	}



</style>
